<template>
  <div class="preivew-video-img" style="text-align: center;position: relative;" @click="_click">
    <i class="el-icon-video-play"
       style="position:absolute;color:#cfd1d6;font-size: 50px;top: calc(100%/1.7 - 40px);left: calc(100%/2 - 25px)"></i>
    <img :src="firstImage" style="height: 180px;" mode="aspectFill">
  </div>
</template>
<script>

export default {
  name: "PreviewVideoImg",
  data(){
    return {
      url:'',
    }
  },
  props: {
    img: String,
    videoUrl: String,
    imgStyle: String
  },
  watch:{
    videoUrl:{
      handler(){

      },
      deep:true
    }
  },
  computed: {
    firstImage() {
      return this.$ossFile.getOssVideoCoverThumbnail(this.videoUrl);
    }
  },
  methods: {
    _click() {
      this.$modal.showVideo(null, this.$yun.getPreviewUrl(this.videoUrl))
    },
  }
}
</script>
<style scoped lang="scss">
.preivew-video-img {


  .el-icon-video-play {
    display: none;
  }

  &:hover {
    cursor: pointer;

    & .el-icon-video-play {
      display: inline-block;
    }
  }
}


</style>

<style>
.preview-modal {
  width: max-content;
}
</style>
